Vue.createApp({
	data() {
		return{
			shopList:[
				{
					name:'官方旗靓店1',
					check:false, //是否勾选
					list:[
						{
							title:'2024新款夏季短袖T恤男纯棉潮流宽松休闲上衣',
							des:'白色/L',
							price:188,
							count:1,
							check:true
						},
						{
							title:'2023新款夏季短袖T恤男纯棉潮流宽松休闲上衣',
							des:'白色/L',
							price:88,
							count:1,
							check:false
						},
					]
				},
				{
					name:'官方旗靓店2',
					check:false, //是否勾选
					list:[
						{
							title:'2024新款夏季短袖T恤男纯棉潮流宽松休闲上衣',
							des:'白色/L',
							price:188,
							count:1,
							check:false
						},
						{
							title:'2023新款夏季短袖T恤男纯棉潮流宽松休闲上衣',
							des:'白色/L',
							price:88,
							count:1,
							check:false
						},
					]
				},
			],
			check:false  //全选按钮
		}
	},
	watch:{
		shopList:{   //监听整个列表
			handler(){
				//当所有店铺全都被选中，全选按钮被勾选
				let list=this.shopList.filter(shop=>!shop.check)
					if (list.length <= 0) {
						this.check=true
					}
			},
			deep:true  //深度监听
		}
	},
	computed:{
		// 计算总件数
		totalNum() {
		    let num = 0
		    this.shopList.forEach(shop => {
		        shop.list.forEach(goods => {
		            num += goods.count
		        })
		    })
		    return num
		},
		// 计算已选件数
		selectedNum() {
		    let num = 0
		    this.shopList.forEach(shop => {
		        shop.list.forEach(goods => {
		            if (goods.check) {
		                num += goods.count
		            }
		        })
		    })
		    return num
		},
		// 计算总价
		totalPrice() {
		    let price = 0
		    this.shopList.forEach(shop => {
		        shop.list.forEach(goods => {
		            if (goods.check) {
		                price += goods.price * goods.count
		            }
		        })
		    })
		    return price
		}
	},
	methods:{
		shopAll(i){  //店铺选中/取消功能
			let goods=this.shopList[i].list  //店铺下的商品列表
			goods.forEach(item=>{
				item.check=this.shopList[i].check
			})
			//取消店铺 取消全选
			if(!this.shopList[i].check){
				this.check=false
			}
		},
		goodsCheck(i,j){  //商品取消选中，店铺取消选中
			let check=this.shopList[i].list[j].check
			if (!check) {
				this.shopList[i].check=false
				this.check=false
			}
			let list=this.shopList[i].list.filter(goods=>!goods.check)
			if (list.length <= 0) {
				// 如果店铺里的商品全部选中了，店铺也被选中
				this.shopList[i].check=true
			}
		},
		checkAll(){  //全部全选/取消
			this.shopList.forEach(shop=>{
				shop.check=this.check
				shop.list.forEach(goods=>{
					goods.check=this.check
				})
			})
		},
		del(i,j){//店铺的下标   商品的下标
			let flag=confirm('确认删除商品吗？')
			if(flag){
				if (i>=0) {//单个删除
					this.shopList[i].list.splice(j,1)
				}else{//多项删除
					this.shopList.forEach(shop=>{
						//过滤出没有选中的商品
						shop.list=shop.list.filter(goods=>!goods.check)
					})
				}
				// 过滤出去没有商品的店铺 
				this.shopList=this.shopList.filter(shop=>shop.list.length>0)
			}
		},
		checkout() {  // 结算功能
		    let selectedGoods = []
		    this.shopList.forEach(shop => {
		        shop.list.forEach(goods => {
		            if (goods.check) {
		                selectedGoods.push({
		                    shopName: shop.name,
		                    title: goods.title,
		                    des: goods.des,
		                    price: goods.price,
		                    count: goods.count
		                })
		            }
		        })
		    })
		
		    if (selectedGoods.length === 0) {
		        alert('请先选择要结算的商品')
		        return
		    }
		
		    // 显示结算信息
		    let checkoutInfo = `您选择了以下商品进行结算：\n`
		    selectedGoods.forEach((goods, index) => {
		        checkoutInfo += `${index + 1}. ${goods.title} (${goods.des}) x${goods.count} 价格：¥${goods.price * goods.count}\n`
		    })
		    checkoutInfo += `总价：¥${this.totalPrice.toFixed(2)}`
		    alert(checkoutInfo)
		}
	}
}).mount("#app")